<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<title>新主领红包</title>
		<link href="{$Think.config.static_path}css/main.css" rel="stylesheet" type="text/css">
		<script charset="utf-8" type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
		<script type="text/javascript">
	
			wx.config({
				debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				jsApiList: ['hideOptionMenu'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
			});
			wx.ready(function () {
				wx.hideOptionMenu();
			});

			function loading(canvas, options) {
				this.canvas = canvas;
				if (options) {
					this.radius = options.radius || 12;
					this.circleLineWidth = options.circleLineWidth || 4;
					this.circleColor = options.circleColor || 'lightgray';
					this.moveArcColor = options.moveArcColor || 'gray';
				} else {
					this.radius = 12;
					this.circelLineWidth = 4;
					this.circleColor = 'lightgray';
					this.moveArcColor = 'gray';
				}
			}
			loading.prototype = {
				show: function() {
					var canvas = this.canvas;
					if (!canvas.getContext) return;
					if (canvas.__loading) return;
					canvas.__loading = this;
					var ctx = canvas.getContext('2d');
					var radius = this.radius;
					var me = this;
					var rotatorAngle = Math.PI * 1.5;
					var step = Math.PI / 6;
					canvas.loadingInterval = setInterval(function() {
						ctx.clearRect(0, 0, canvas.width, canvas.height);
						var lineWidth = me.circleLineWidth;
						var center = {
							x: canvas.width / 2,
							y: canvas.height / 2
						};

						ctx.beginPath();
						ctx.lineWidth = lineWidth;
						ctx.strokeStyle = me.circleColor;
						ctx.arc(center.x, center.y + 20, radius, 0, Math.PI * 2);
						ctx.closePath();
						ctx.stroke();
						//在圆圈上面画小圆   
						ctx.beginPath();
						ctx.strokeStyle = me.moveArcColor;
						ctx.arc(center.x, center.y + 20, radius, rotatorAngle, rotatorAngle + Math.PI * .45);
						ctx.stroke();
						rotatorAngle += step;

					},
					100);
				},
				hide: function() {
					var canvas = this.canvas;
					canvas.__loading = false;
					if (canvas.loadingInterval) {
						window.clearInterval(canvas.loadingInterval);
					}
					var ctx = canvas.getContext('2d');
					if (ctx) ctx.clearRect(0, 0, canvas.width, canvas.height);
				}
			};
		</script>
		<script src="{$Think.config.static_path}js/jquery.js" type="text/javascript"></script>
		<script src="{$Think.config.static_path}js/wScratchPad.js" type="text/javascript"></script>
        <script src="{$Think.config.static_path}js/util.js" type="text/javascript"></script>
	</head>
	<body  data-role="page" class="red activity-scratch-card-winning">
		<div class="card">
			<img src="{$Think.config.static_path}images/word2.png" class="wordnew">
			<div class="div">
				<div id="prize">
				</div>
				<div id="scratchpad">
               		 <img src="{$Think.config.static_path}images/gua.png" id="guaimg"  style="display:none">
				</div>
			</div>
			<img src="{$Think.config.static_path}images/bar.png" class="bar">
		</div>
		<div class="red2">
			<img src="{$Think.config.static_path}images/rule.png" class="rule">
			<div class="lh24">
				<p>1、11月20日起，绿地南京/徐州的新业主可参与；</p>
				<p>2、在售项目的新业主即有一个专属红包；</p>
				<p>3、刮一刮涂层即可打开红包；</p>
				<p>4、每个红包对应一份礼品；</p>
				<p>5、刮得红包需当天兑换奖品，过期作废</p>
				<p>6、红包数量有限，领完即止；</p>
				<p>7、本活动的最终解释权归江苏绿地会。</p>
			</div>
			<img src="{$Think.config.static_path}images/mybag.png" class="rule">
			<table>
				<thead>
					<td>姓名</td>
					<td>电话</td>
					<td>奖品名称</td>
					<td>中奖时间</td>
				</thead>
				<tbody>
					<tr id="tbody">
						<td   colspan="4">暂无红包信息!</td>
					</tr>
				</tbody>
			</table>
		</div>	
		<div class="iframe-div" style="display:none">
			<div class="iframe-content">
				<div class="title">
					<p>输入6位邀请码，才可领红包哦！<br>详情咨询置业顾问。</p>
				</div>
				<div class="sixcode">
					<p> 
						<input type="tel" maxlength="6" id="code" placeholder="请输入6位邀请码">
					</p>
				</div>
				<div class="two-button">
					<button class="cancel">取消</button>
					<button class="submit">确定</button>
				</div>
			</div>
		</div>
	</body>

		<script type="text/javascript">
		
			var ww=parseInt($(".card").css("width"));
			$("#scratchpad").css("margin-left",(ww-250)/2+'px')
			window.sncode = "null";
			window.prize = "谢谢参与";
			var openid="{$openid}";
			//alert(openids);
			var zjl = false;
			var num = 0;
			
			var goon = true;
			$("#prize").css("width",ww)
			$(function() {	
				$.getJSON('__URL__/myprizeInfo', {openid:openid},function(json) {
					//alert(json.status);
						if(json.status == 0){
							Util.info(json.info,16,3000);
							$("#guaimg").show();
							return;
						}
						if(json.status == -1){
							$("#guaimg").hide();
							document.getElementById('prize').innerHTML = json.theAward;
							$("#tbody").html("<td>"+json.name+"</td><td>"+json.tel+"</td><td>"+json.theAward+"</td><td>"+json.ctime+"</td>");
							return ;
						}else{
							$("#guaimg").show();
							$(".iframe-div").show();
							$(".submit").click(function(){
								var code_id = $("#code").val();
								//alert(code_id);
								if(code_id == ""){
									Util.info("请输入6位邀请码",16,3000);
									return;
								}else{
									$.getJSON('__URL__/checkCode', {code_id:code_id,openid:openid},function(json) {
										if(json.status > 0){
											//alert(1);
											$(".iframe-div").hide();
											$("#guaimg").hide();
											wScratchPads(json.info,code_id);
										}else{
											Util.info(json.info,16,3000);
										}
									})
								}
								
							})
							$(".cancel").click(function(){
								$("#code").val("");
							})
						}
							
						//$("#guaimg").show();
						//wScratchPads(json.info,16,3000);
					})
				
				//$("#prize").html("谢谢参与");
				//loadingObj.hide();
				//$(".loading-mask").remove();
			});
			
			
			function wScratchPads(sid,code_id){
				
				
				$("#scratchpad").wScratchPad({
					width: 250,
					height: 110,
					image2: "{$Think.config.static_path}images/gua.png",
					scratchMove: function() {
						num++;
						if (num == 2) {
							var award = '';
							$.getJSON("__URL__/getAjaxRedRs",{sid:sid,code_id:code_id},function(json){
								award = json.info;
								zjl = true;
								document.getElementById('prize').innerHTML = award;
								if(json.status > 0 &&  num >= 5){
									$("#tbody").html("<td>"+json.name+"</td><td>"+json.tel+"</td><td>"+json.info+"</td><td>"+json.ctime+"</td>");
								}
							})
						}

						if (zjl && num > 10 && goon) {
						
							//$("#zjl").fadeIn();
							goon = false;
							
							$("#zjl").slideToggle(500);
							//$("#outercont").slideUp(500)
						}
					}
				});
				
			}

	
			
		</script>
</html>